<template>
  <view class="content">
    <view class="home-drop" id="target">
      <image src="/static/image/main.png" mode="aspectFill" class="home-drop_img"></image>
    </view>
    <view class="home-content u-p-l-32 u-p-r-32">
      <view class="home-tips">
        <view class="home-title">{{Name}}</view>
      </view>
      <view class="roll">
        <view class="roll-flex_img">
          <view class="roll-img" v-for="(item,index) in 6" :key="index">
            <image src="/static/logo.png" mode="scaleToFill" class="img"></image>
          </view>
        </view>
        <view class="u-m-t-40 u-m-b-10">
          <u-line color="#d0d0d0" />
        </view>
        <view class="u-flex roll-num">
          <view class="">
            <text class="iconfont icon-baomingrenshu roll-num_img"></text>
          </view>
          <view class="">
            <text class="roll-num_3">30</text>人已报名 | 限30人
          </view>
          <view style="margin-left: auto;" @click="look">
            查看名单
          </view>
        </view>
      </view>
      <view class="detail u-m-t-32">
        <view class="detail_c u-flex">
          <view class="detail_l">
            <view class="detail_l_img"><text class="iconfont icon-wode detail_l_icon"></text></view>
          </view>
          <view class="detail_r">
            汕头市 | 乐扬文化
          </view>
        </view>
        <view class="detail_c u-flex">
          <view class="detail_l">
            <view class="detail_l_img"><text class="iconfont icon-shijian detail_l_icon"></text></view>
          </view>
          <view class="detail_r">
            12月30日-12月31日 16:00p.m~01:00a.m.
          </view>
        </view>
        <view class="detail_c u-flex">
          <view class="detail_l">
            <view class="detail_l_img"><text class="iconfont icon-didian detail_l_icon"></text></view>
          </view>
          <view class="detail_r">
            广东省深圳市福田区福华一路1号大中华交易广场深圳大中华喜来登酒店
          </view>
          <view class=""><u-icon name="arrow-right" color="#999" size="28"></u-icon></view>
        </view>
        <view class="detail_c u-flex">
          <view class="detail_l">
            <view class="detail_l_img"><text class="iconfont icon-baomingzhuangtai detail_l_icon"></text></view>
          </view>
          <view class="detail_r">
            报名状态 <text class="detail_w u-m-l-10">正在报名</text>
          </view>
        </view>
        <view class="detail_c u-flex">
          <view class="detail_l">
            <view class="detail_l_img"><text class="iconfont icon-fufei detail_l_icon"></text></view>
          </view>
          <view class="detail_r">
            <text class="detail_w u-m-r-10">付费</text> 288元/人
          </view>
        </view>
        <view class="detail_c u-flex">
          <view class="detail_l">
            <view class="detail_l_img"><text class="iconfont icon-beizhu detail_l_icon"></text></view>
          </view>
          <view class="detail_r">
            备注:报名并完成签到后可获得20积分
          </view>
        </view>
        <view class="detail_c u-flex" @click="jump">
          <view class="detail_l">
            <view class="detail_l_img"><text class="iconfont icon-xianchangzhibo detail_l_icon"></text></view>
          </view>
          <view class="detail_r">
            观看现场直播
          </view>
          <view class=""><u-icon name="arrow-right" color="#999" size="28"></u-icon></view>
        </view>
        <view class="detail_c u-flex" @click="jump">
          <view class="detail_l">
            <view class="detail_l_img"><text class="iconfont icon-zhaopianzhibo detail_l_icon"></text></view>
          </view>
          <view class="detail_r">
            观看活动精彩瞬间
          </view>
          <view class=""><u-icon name="arrow-right" color="#999" size="28"></u-icon></view>
        </view>
      </view>
      <view style="height: 100rpx;"></view> 
      <view>
        <image src="/static/image/bg2.png" mode="widthFix" class="img"></image>
      </view>
      <view style="height: 150rpx;"></view>
    </view>
    
    <view class="roll-btn">
      <view class="roll-btn_l u-flex-1">
        <view class="roll-btn-w_img">
          <view class="roll-btn_img">
            <iconfont name="icon-zhuanfa" size="50"></iconfont>
          </view>
        </view>
        <view class="roll-btn-w_img">
          <view class="roll-btn_img">
            <iconfont name="icon-shoucang" size="50"></iconfont>
          </view>
        </view>
      </view>
      <view class="roll-btn_r u-flex-3" @click="SingUp">
        <view class="signup">立即报名</view>
        <view class="signup_b">报名截止倒计时 3days</view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        Name: '',
        Height:'',
        isActive:false,
        color:'#333'
      }
    },
    onLoad(options) {
      uni.setNavigationBarTitle({
        title: options.Name
      });
      this.Name = options.Name
    },
    methods: {
      look(){
        uni.navigateTo({
        	url: '/pages/Events/ViewList/ViewList?Name='+this.Name
        });
      },
        
      SingUp(){
        uni.navigateTo({
        	url: '/pages/Events/SignUp/SignUp?Name='+this.Name
        });
      },
      jump(){
        uni.navigateTo({
        	url: '/pages/Events/WebView/WebView?Name='+this.Name
        });
      },
      click(e){
        this.color = '#ff0000'
      }
    }
  }
</script>

<style lang="scss" scoped>
  .img {
    width: 100%;
    height: 100%;
  }

  .content {
    .home-drop {
      width: 100%;
      height: 340rpx;
			position: fixed;
			z-index: 1;
      .home-drop_img {
        width: 100%;
        height: 100%;
      }
    }

    .home-content {
      width: 100%;
      background-color: #ffffff;
      border-top-left-radius: 28rpx;
      border-top-right-radius: 28rpx;
      position: absolute;
      z-index: 10;
      top: 340rpx;
      margin-top: -40rpx;
      .home-tips {
        margin: 32rpx 0;

        .home-title {
          font-size: 36rpx;
        }
      }
    }

    .roll {
      width: 100%;
      height: 244rpx;
      background-color: #ececec;
      border-radius: 28rpx;
      padding: 32rpx;

      .roll-flex_img {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        height: 80rpx;
        overflow: hidden;

        .roll-img {
          width: 80rpx;
          height: 80rpx;
          margin-right: 16rpx;

          .img {
            width: 100%;
            height: 100%;
            border-radius: 50rpx;
          }
        }
      }

      .roll-num {
        width: 100%;

        .roll-num_img {
          width: 56rpx;
          height: 56rpx;
          font-size: 56rpx;
          .img {
            width: 100%;
            height: 100%;
          }
        }

        .roll-num_3 {
          font-size: 36rpx;
          color: $supernut-color;
          font-weight: 600;
          padding: 0 10rpx;
        }
      }
    }

    .detail {
      .detail_c {
        width: 100%;
        height: 96rpx;
        // margin: 56rpx 0;

        .detail_l_img {
          width: 52rpx;
          height: 52rpx;
          .detail_l_icon{
            font-size: 52rpx;
          }
        }
        .detail_r{
          width: 100%;
          padding-left: 32rpx;
        }
        .detail_w {
          font-weight: 600;
        }
      }
    }
  }
  .roll-btn{
    display: flex;
    align-items: center;
    width:100%;
    height: 100rpx;
    background-color: #ffffff;
    position: fixed;
    bottom: 0rpx;
    z-index: 111;
    .roll-btn_l{
      display: flex;
      align-items: center;
      justify-content: center;
      .roll-btn-w_img{
        width: 100rpx;
        height: auto;
        .roll-btn_img{
          width: 48rpx;
          height: 48rpx;
          margin: 0 24rpx;
          .roll-btn_icon{
            font-size: 48rpx;
          }
        }
      }
      
    }
    .roll-btn_r{
      height: 100%;
      background-color: $supernut-color;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .signup{
        color: #333333;
        font-size: 28rpx;
        font-weight: 600;
      }
      .signup_b{
        font-size: 20rpx;
      }
    }
  }
  .icon_active{
    color: $supernut-cikir_red;
  }
</style>